<template>
	<view class="content">
		<carousel :img-list="swiperList" url-key="picture" @selected="selectedBanner" />
		<!-- 首页菜单 -->
		<view class="menu_title">特种作业取证</view>
		<view class="menu_top">
			<block v-for="(item, index) in menuList" :key="indexindex">
				<view>
					<image :src="item.img" mode="widthFix"></image>
					<text class="top_title">{{ item.name }}</text>
				</view>
			</block>
		</view>
		<view class="menu_top_2">
			<view><image src="../../static/img/enterprise.png" mode="widthFix"></image></view>
			<view><image src="../../static/img/practicalSkill.png" mode="widthFix"></image></view>
		</view>
		<view class="course_body">
			<view class="title_top">
				<text>热门</text>
				<text>更多课程></text>
			</view>
			<view>
				<block v-for="(item, index) in goodsList" :key="index">
					<navigator :url="`../course/c_details?id=${item.courseId}`"><teachList :items="item"></teachList></navigator>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import carousel from '@/components/vear-carousel/vear-carousel';
import teachList from '@/components/teachList.vue';
export default {
	components: {
		carousel,
		teachList
	},
	data() {
		return {
			title: 'Hello',
			swiperList: [],
			menuList: [
				{
					img: '../../static/img/nbsp.png',
					name: '低压电工'
				},
				{
					img: '../../static/img/tc.png',
					name: '熔化焊接与热切割'
				},
				{
					img: '../../static/img/high.png',
					name: '高处作业'
				},
				{
					img: '../../static/img/highSide.png',
					name: '高压电工'
				},
				{
					img: '../../static/img/relay.png',
					name: '继电保护'
				},
				{
					img: '../../static/img/power.png',
					name: '电力电缆'
				},
				{
					img: '../../static/img/sewind.png',
					name: '电气试验'
				},
				{
					img: '../../static/img/whole.png',
					name: '全部分类'
				}
			],
			list: [
				{
					name: '待收货'
				},
				{
					name: '待付款'
				},
				{
					name: '待评价'
				},
				{
					name: '待评价'
				},
				{
					name: '待评价'
				},
				{
					name: '待评价'
				},
				{
					name: '待评价'
				}
			],
			current: 0,
			goodsList: [
				{
					title: '这里是标题呀',
					prcie: 66,
					access_num: 12381,
					image: '../../static/texts.jpg'
				},
				{
					title: '这里是标题呀',
					prcie: 66,
					access_num: 12381,
					image: '../../static/texts.jpg'
				},
				{
					title: '这里是标题呀',
					prcie: 66,
					access_num: 12381,
					image: '../../static/texts.jpg'
				},
				{
					title: '这里是标题呀',
					prcie: 66,
					access_num: 12381,
					image: '../../static/texts.jpg'
				}
			]
		};
	},
	onLoad() {
		this.$u.api.gethotCourse().then(res => {
			this.goodsList = res.data.data;
		});
		this.getcarousel();
	},
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			uni.switchTab({
				url: '../classify/index'
			});
		}
	},
	methods: {
		getcarousel() {
			this.$u.api.getcarousel().then(res => {
				this.swiperList = res.data.data;
			});
			console.log(this.swiperList);
		}
	}
};
</script>

<style lang="scss" scoped>
.title_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25rpx;
	padding: 0 20rpx;
	margin: 20rpx 0;

	> text {
		&:nth-child(1) {
			font-size: 30rpx;
			font-weight: 600;
		}
	}
}
.menu_top {
	display: flex;
	flex-flow: wrap;
	font-size: 22rpx;
	> view {
		width: 25%;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		> image {
			width: 72rpx;
		}
	}
}
.menu_top_2 {
	display: flex;
	margin-top: 60rpx;
	> view {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		> image {
			width: 80%;
		}
	}
}
.top_title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menu_title {
	font-size: 30rpx;
	color: #666;
	padding-left: 60rpx;
	margin-top: 60rpx;
	&::before {
		content: '|';
		width: 16rpx;
		height: 30rpx;
		background: #05b2b5;
		color: #05b2b5;
		margin-right: 10rpx;
	}
}
.course_body {
	margin-top: 70rpx;
	padding-top: 50rpx;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-right-radius: 0em;
	-webkit-border-bottom-left-radius: 0em;
	-moz-border-radius-topleft: 1em;
	-moz-border-radius-topright: 1em;
	-moz-border-radius-bottomright: 0em;
	-moz-border-radius-bottomleft: 0em;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	border-bottom-right-radius: 0em;
	border-bottom-left-radius: 0em;
	-moz-box-shadow: 0px -2px 8px #adadad;
	-webkit-box-shadow: 0px -2px 8px #adadad;
	box-shadow: 0px -2px 8px #adadad;
}
</style>
